window.addEventListener('load', function() {
  var $ = document.querySelector.bind(document);

  /**案例：让box盒子，从左向右移动2rem 。
   * 过1s后，再向右移动3rem。
   * 再过1s后，向左移动1rem
   * 再过1s后，再向左移动2.33rem
   * 最后，过1s，移动到原点
  */

  var box = $('.box');
  /**用pr函数，把要移动的正常的px距离，转化为当前屏幕下的px距离 
   * 比如2rem在1080尺寸的屏幕下，是200px
   * 但是在360尺寸屏幕下，就是66.6667px
   * 
   * 实际项目中，可能不会写1080下具体的数字，那就没有转换的必要了
   * 根据实际情况来定
  */
  function pr(distance) { 
    var _cw = document.body.clientWidth;
    return distance * _cw / 1080;
  }

  animate(box, 0, pr(200), function() {
    setTimeout(function() {
      animate(box, box.offsetLeft, box.offsetLeft + pr(300), function() {
        setTimeout(function() {
          animate(box, box.offsetLeft, box.offsetLeft - pr(100), function() {
            setTimeout(function() {
              animate(box, box.offsetLeft, box.offsetLeft- pr(233), function() {
                setTimeout(function() {
                  animate(box, box.offsetLeft, 0);
                }, 1000)
              })
            }, 1000)
          })
        }, 1000)
      })
    }, 1000)
  })

  /**animate移动函数 */
  function animate(obj, start, end, cb) { 
    function getAttr(obj) {
      return parseFloat(window.getComputedStyle(obj).left);
    }
    var _dif = getAttr(obj) - start;
    start = start == getAttr(obj) ? start : getAttr(obj);
    end = end + _dif;
    var step = (end - start) / 10;
    var n = 1;
    clearInterval(timer)
    function move() {
      obj.style.left = start + step * n + 'px';
      if(step >= 0) {
        if(obj.offsetLeft >= parseInt(end)) { 
          obj.style.left = Math.abs(end) <= 1 ? 0 : end.toFixed(4) + 'px';
          clearInterval(timer);
          cb && cb();
        }
      } else if(step <= 0) {
        if(obj.offsetLeft <= parseInt(end)) {
          obj.style.left = Math.abs(end) <= 1 ? 0 : end.toFixed(4) + 'px';
          clearInterval(timer);
          cb && cb();
        }
      }
      n++;
    }
    var timer = setInterval(move, 30);
  }
})